<template>
  <div class="uploadResume">
    <Header />
    上传简历
    <div>
      <input type="file"
      @change="handleChange" />
    </div>
    <img :src="imageUrl" alt="">
  </div>
</template>

<script>
import Header from '../../components/Header/index'
export default {
  name: 'uploadResume',
  components: { Header },
  data() {
    return {
      baseUrl: '',
      fileName: '',
      imageUrl: ''
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {},
  methods: {
    handleChange(event) {
      let baseUrl = 'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/'
      // if (event.target.files) {
      //   }
        let file = event.target.files[0];
        // console.log(file);
        this.baseUrl = baseUrl
        this.fileName = file.name
        this.imageUrl = this.baseUrl + this.fileName
      sessionStorage.setItem('rimgUrl', this.fileName)
      // this.$emit('rimgUrl', this.imageUrl)
    }
  },
}
</script>
<style>
.uploadResume-box {
  width: 400px;
  height: 400px;
  margin: auto;
  margin-top: 100px;
}
.uploadResume img{
  width: 100px;
  height: 100px;
}
/* .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  } */
  	.btn{
        color: #fff;
	    background-color: #337ab7;
	    border-color: #2e6da4; 
	    display: inline-block;
	    padding: 6px 12px;
	    margin-bottom: 0;
	    font-size: 14px;
	    font-weight: 400;
	    line-height: 1.42857143;
	    text-align: center;
	    white-space: nowrap;
	    text-decoration: none;
	    vertical-align: middle;
	    -ms-touch-action: manipulation;
	    touch-action: manipulation;
	    cursor: pointer;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    background-image: none;
	    border: 1px solid transparent;
	    border-radius: 4px;
	}
	a.btn:hover{
      background-color: #3366b7;
	}
	.progress{
		margin-top:2px;
	    width: 200px;
	    height: 14px;
	    margin-bottom: 10px;
	    overflow: hidden;
	    background-color: #f5f5f5;
	    border-radius: 4px;
	    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	}
	.progress-bar{ 
		background-color: rgb(92, 184, 92);
		background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.14902) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.14902) 50%, rgba(255, 255, 255, 0.14902) 75%, transparent 75%, transparent);
		background-size: 40px 40px;
		box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;
		box-sizing: border-box;
		color: rgb(255, 255, 255);
		display: block;
		float: left; 
		font-size: 12px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		transition-delay: 0s;
		transition-duration: 0.6s;
		transition-property: width;
		transition-timing-function: ease;
		width: 266.188px;
	}
</style>